<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <title>充值中心</title>
</head>
<body>
    <!--头部  -->
    <header>
        <i class="ion-chevron-left"  onclick="javascript:history.back();"></i> 
        <h4>充值中心</h4>
    </header>
    <main>
        <div class="chongDate_dian">
             <h4>充值牛牛币（1元=1牛牛币），充值款项无法退回</h4>
        </div>
        <!-- 选择充值 -->
        <form action="">
            <ul class="chong_money">
                <li>
                    <span>5牛牛币</span>
                    <button class="chong-qian" value="5" >￥5</button>
                </li>
                <li>
                    <span>10牛牛币</span>
                    <button class="chong-qian" value="10">￥10</button>
                </li>
                <li>
                    <span>50牛牛币</span>
                    <button class="chong-qian" value="50">￥50</button>
                </li>
                <li>
                    <span>100牛牛币</span>
                    <button class="chong-qian" value="100">￥100</button>
                </li>
                <div class="xieyi">
                    <input type="checkbox" name="xieyi"><span>同意协定</span>
                </div>
                <li class="zhifu">
                    <img src="img/zhifubao.png" alt="">
                    <div class="zhifu-cont" >
                        <h4 >支付宝支付</h4>
                        <span>推荐有支付宝账号用户使用</span>
                    </div>
                
                </li>
                <li class="zhifu">
                    <img src="img/weixin.png" alt="">
                    <div class="zhifu-cont" >
                        <h4>微信支付</h4>
                        <span>支持使用微信红包零钱</span>
                    </div>
                
                </li>
            
            
            </ul>
        </form>  
    </main>
</body>
<script>
    $(".chong-qian").click(function(e){
        e.preventDefault();
        $(this).css({"background":"red","color":"#fff"}).parent().siblings().children('button').css({"background":"#fff","color":"#000"});

    });
    
</script>
</html>